<template>
    <div>
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        <r-table :isIndex="true" :isPagination="true" :tableData="tableData" :height="tableData.length*107+45" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
        <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            searchData: {
                deviceId: '',
                deviceType: '',
                agent:'',
                saller:''
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'deviceId',
                    placeholder: '设备编号',
                    width: 150
                },
                {
                    type: 'select',
                    prop: 'deviceType',
                    placeholder: '设备类型',
                    width: 150,
                    options: [
                        {
                            label: '格子柜',
                            value: '1'
                        },
                        {
                            label: '弹簧柜',
                            value: '2',
                        },
                    ]
                },
                {
                    type: 'select',
                    prop: 'agent',
                    placeholder: '分配代理商',
                    width: 150,
                    options: [
                        {
                            label: 'A代理',
                            value: '1'
                        },
                        {
                            label: 'B代理',
                            value: '2',
                        },
                    ]
                },
                {
                    type: 'select',
                    prop: 'saller',
                    placeholder: '分配商家',
                    width: 150,
                    options: [
                        {
                            label: 'A商家',
                            value: '1'
                        },
                        {
                            label: 'B商家',
                            value: '2',
                        },
                    ]
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.elFormSubmit()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                }
            ],
            tableData: [
                {
                    deviceId: 1,
                    deviceType: 'aa',
                    agent: 'A代理',
                    saller: 'B商家',
                    ctime: '2020-02-02 02:02:02'
                }
            ],
            tableCols: [
                {
                    label: '设备类型',
                    prop: 'deviceType',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '设备编号',
                    prop: 'deviceId'
                },
                {
                    label: '分配代理商',
                    prop: 'agent'
                },
                {
                    label: '分配商家',
                    prop: 'saller',
                },
                {
                    label: '激活时间',
                    prop: 'ctime'
                },
                {
                    label: '操作',
                    type: "button",
                    btnList: [
                        {
                            label: '查看',
                            type: 'primary',
                            // isShow: e => e.orderId == '123' ? true : false,
                            handle: (row) => this.elFormDetail(row)
                        },
                    ]
                }

            ],
            tablePage: { limit: 10, page: 1, total: 0 },
            formData: {
                bannerName: "",
                bannerPic: "",
                pwd: "",
                devChose: "",
                isOnline: ""
            },
            formCols: [
                { type: "input", label: "广告名称", width: 350, prop: "bannerName", rmblock: true, remark: '广告名称只是作为辨别多个广告条目之用，并不显示在广告中' },
                { type: "upload", label: "广告素材", width: 200, prop: "bannerPic", remark: '只能上传jpg/png/MP4格式文件，文件不能超过50kb', rmblock: true },
                { type: "select", label: "选择设备", width: 350, prop: "devChose", options: [{ name: 'a', value: 'A设备' }] },
                { type: "switch", label: "上线/下线", width: 350, prop: "isOnline" },
            ],
            formRules: {
                nickName: [
                    { required: true, message: '请输入管理员名称', trigger: 'blur' },
                ],
                account: [
                    { required: true, message: '请输入登录账号', trigger: 'blur' },
                ],

                pwd: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' },
                ],
                roleids: [
                    { required: true, message: '请选择角色', trigger: 'blur' },
                ],
            },
            formHandle: [
                {
                    label: "取消",
                    handle: e => this.elFormVisible(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmit(),
                },

            ],


        };
    },
    components: {},
    computed: {},
    methods: {
        init() {
            let param = { ...this.searchData, ...this.tablePage }

        },
        elFormSubmit(e) {
            //查询
            console.log(e)
        },
        elFormDetail(row) {
            Object.keys(this.formData).forEach(key => {
                this.formData[key] = row[key]
            })
            this.formData.id = row.id;
            this.formData.cardId = row.cardId
            // if (this.formCols[1].label == '登录密码') {
            //     this.formCols.splice(1, 1)
            // }

            this.elFormVisible()
        },
    }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
